Cocos Creator 编辑器的强大之处就是可以让开发者快速的制作游戏原型。

下面我们将跟随教程制作一款名叫 一步两步 的魔性小游戏。这款游戏考验玩家的反应能力，根据路况选择是要跳一步还是跳两步，“一步两步，一步两步，一步一步似爪牙似魔鬼的步伐”。

可以在 这里 体验一下游戏的完成形态。

如果您还不了解如何获取和启动 Cocos Creator，请阅读 安装和启动 一节。

首先启动 Cocos Creator，然后新建一个名为 MindYourStep 的项目，如果不知道如何创建项目，请阅读 Hello World!。

新建项目后会看到如下的编辑器界面：

在 Cocos Creator 中，游戏场景（Scene） 是开发时组织游戏内容的中心，也是呈现给玩家所有游戏内容的载体。游戏场景中一般会包括以下内容：

当玩家运行游戏时，就会载入游戏场景，游戏场景加载后就会自动运行所包含组件的游戏脚本，实现各种各样开发者设置的逻辑功能。所以除了资源以外，游戏场景是一切内容创作的基础。现在，让我们来新建一个场景。

在 资源管理器 中点击选中 assets 目录，点击 资源管理器 左上角的加号按钮，选择文件夹，命名为 Scenes。

点击选中 Scenes 目录（下图把一些常用的文件夹都提前创建好了），点击鼠标右键，在弹出的菜单中选择 场景文件。

我们创建了一个名叫 New Scene 的场景文件，创建完成后场景文件 New Scene 的名称会处于编辑状态，将它重命名为 Main。

双击 Main，就会在 场景编辑器 和 层级管理器 中打开这个场景。

我们的主角需要在一个由方块（Block）组成的跑道上从屏幕左边向右边移动。我们使用编辑器自带的立方体（Cube）来组成道路。

在 层级管理器 中创建一个立方体（Cube），并命名为 Cube。

选中 Cube，按 Ctrl + D 复制出 3 个 Cube。

将 3 个 Cube 按以下坐标排列：

效果如下：

首先创建一个名为 Player 的空节点，然后在这个空节点下创建名为 Body 的主角模型节点，为了方便，我们采用编辑器自带的胶囊体模型做为主角模型。

分为两个节点的好处是，我们可以使用脚本控制 Player 节点来使主角进行水平方向移动，而在 Body 节点上做一些垂直方向上的动画（比如原地跳起后下落），两者叠加形成一个跳越动画。

然后将 Player 节点设置在（0，0，0）位置，使得它能站在第一个方块上。效果如下：

想要主角影响鼠标事件来进行移动，我们就需要编写自定义的脚本。如果您从没写过程序也不用担心，我们会在教程中提供所有需要的代码，只要复制粘贴到正确的位置就可以了，之后这部分工作可以找您的程序员小伙伴来解决。下面让我们开始创建驱动主角行动的脚本吧。

如果还没有创建 Scripts 文件夹，首先在 资源管理器 中右键点击 assets 文件夹，选择 新建 -> 文件夹，重命名为 Scripts。

右键点击 Scripts 文件夹，选择 新建 -> TypeScript，创建一个 TypeScript 脚本，有关 TypeScript 资料可以查看 TypeScript 官方网站。

将新建脚本的名字改为 PlayerController，双击这个脚本，打开代码编辑器（例如 VSCode）。

注意：Cocos Creator 中脚本名称就是组件的名称，这个命名是大小写敏感的！如果组件名称的大小写不正确，将无法正确通过名称使用组件！

在打开的 PlayerController 脚本里已经有了预先设置好的一些代码块，如下所示：

这些代码就是编写一个组件（脚本）所需的结构。其中，继承自 Component 的脚本称之为 组件（Component），它能够挂载到场景中的节点上，用于控制节点的行为，更详细的脚本信息可以查看 脚本。

我们在脚本 PlayerController 中添加对鼠标事件的监听，让 Player 动起来：

现在我们可以把 PlayerController 组件添加到主角节点 Player 上。在 层级管理器 中选中 Player 节点，然后在 属性检查器 中点击 添加组件 按钮，选择 添加用户脚本组件 -> PlayerController，为主角节点添加 PlayerController 组件。

为了能在运行时看到物体，我们需要将场景中 Camera 的参数进行一些调整，Position 设置为（0，0，13），Color 设置为（50，90，255，255）：

然后点击工具栏中心位置的 Play 按钮：

在打开的网页中点击鼠标左键和右键，可以看到如下画面：

更多的预览功能，可以参考 项目预览调试

从上面运行的结果可以看到单纯对 Player 进行水平方向的移动是十分呆板的，我们要让 Player 跳跃起来才比较有感觉，可以通过为 Player 添加垂直方向的动画来达到这个效果。有关 动画编辑器 的更多信息，请阅读 动画编辑器

选中场景中的 Body 节点，然后在编辑器下方的 动画编辑器 中添加 Animation 组件并创建 Clip，命名为 oneStep。

进入动画编辑模式，添加 position 属性轨道，并添加三个关键帧，position 值分别为（0，0，0）、（0，0.5，0）、（0，0，0）。

注意：退出动画编辑模式前记得要保存动画，否则做的动画就白费了。

我们还可以通过 资源管理器 来创建 Clip。创建一个名为 twoStep 的 Clip 并将它添加到 Body 的 Animation 上，这里为了录制方便调整了一下面板布局。

进入动画编辑模式，选择并编辑 twoStep 的 Clip，类似第 2 步，添加三个 position 的关键帧，分别为（0，0，0）、（0，1，0）、（0，0，0）。

在 PlayerController 组件中引用 动画组件，我们需要在代码中根据跳的步数不同来播放不同的动画。

首先需要在 PlayerController 组件中引用 Body 身上的 Animation。

然后在 属性检查器 中将 Body 身上的 Animation 拖到这个变量上。

在跳跃的函数 jumpByStep 中加入动画播放的代码：

最后点击 Play 按钮，点击鼠标左键和右键，可以看到新的跳跃效果：

为了让游戏有更久的生命力，我们需要一个很长的跑道让 Player 在上面一直往右跑。在场景中复制一堆 Cube 并编辑位置来组成跑道显然不是一个明智的做法，我们可以通过脚本完成跑道的自动创建。

一般游戏都会有一个管理器，主要负责整个游戏生命周期的管理，可以将跑道的动态创建代码放到这里。在场景中创建一个名为 GameManager 的节点，然后在 assets/Scripts 中创建一个名为 GameManager 的 TypeScript 脚本文件，并将它添加到 GameManager 节点上。

对于需要重复生成的节点，我们可以将它保存成 Prefab（预制）资源，作为我们动态生成节点时使用的模板。

将生成跑道的基本元素 正方体（Cube） 制作成 Prefab，之后可以把场景中的三个 Cube 都删除了。

Player 需要一个很长的跑道，理想的方法是能动态增加跑道的长度，这样可以永无止境地跑下去，这里为了方便先生成一个固定长度的跑道，跑道长度可以自己定义。另外，我们可以在跑道上生成一些坑，当 Player 跳到坑上就 GameOver 了。

将 GameManager 脚本中的代码替换成以下代码：

有光的地方就会有影子，光和影构成明暗交错的 3D 世界。接下来我们为角色加上简单的影子。

在 层级管理器 中点击最顶部的 Scene 节点，然后在 属性检查器 勾选 shadows 中的 Enabled，并修改 Distance 和 Normal 属性：

点击 Player 节点下的 Body 节点，将 cc.MeshRenderer 组件中的 ShadowCastingMode 设置为 ON。

此时在 场景编辑器 中会看到一个阴影面片，预览会发现看不到这个阴影，这是因为它在模型的正后方，被胶囊体盖住了。

新建场景时默认会添加一个挂载了 cc.DirectionalLight 组件的 Main Light 节点，由这个平行光计算阴影。所以为了让阴影换个位置显示，我们可以调整这个平行光的方向。在 层级管理器 中点击选中 Main Light 节点，调整 Rotation 属性为（-10，17，0）。

点击预览可以看到影子效果：

做为一个官方教程，用胶囊体当主角显的有点寒碜，所以我们花（低）重（预）金（算）制作了一个 Cocos 主角。

从原始资源导入模型、材质、动画等资源不是本篇基础教程的重点，所以这边直接使用已经导入工程的资源。将 项目工程（GitHub | Gitee）中 assets 目录下的 cocos 文件夹拷贝到你自己工程的 assets 目录下。

在 cocos 文件中已经包含了一个名为 Cocos 的 Prefab，将它拖拽到 层级管理器 中 Player 节点下的 Body 节点中，作为 Body 节点的子节点。

同时在 属性检查器 中移除原先的胶囊体模型：

此时会发现模型有些暗，可以在 Cocos 节点下加个聚光灯（Spotlight），以突出它锃光瓦亮的脑门。

现在预览可以看到主角初始会有一个待机动画，但是跳跃时还是用这个待机动画会显得很不协调，所以我们可以在跳跃过程中将其换成跳跃的动画。在 PlayerController.ts 类中添加一个引用模型动画的变量：

同时，因为我们将主角从胶囊体换成了人物模型，可以弃用之前为胶囊体制作的动画，并注释相关代码：

然后在 层级管理器 中将 Cocos 节点拖拽到 Player 节点的 CocosAnim 属性框中：

在 PlayerController 脚本的 jumpByStep 函数中播放跳跃动画：

在 PlayerController 脚本的 onOnceJumpEnd 函数中让主角变为待机状态，播放待机动画。

预览效果如下：

PlayerController.ts

GameManager.ts